<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级事件添加</title>
</head>

<body>
    <!-- dom事件流，捕获（从上往下）和冒泡（从下往上），在一个父类中如果子类和父类都有事件，则在实现一个事件时，其他子类或则是父类的事件也会实现 -->
    <!-- 监听事件的参数通常是三个参数，最后一个参数是控制事件是捕获（从父类往下查找），还是冒泡（从子类往上查找）默认的是false事件在冒泡时执行的，可以
        改为true事件改为捕获 -->
        <!-- 
            有三个参数，最后一个参数默认是false，事件流都会执行， true代表捕获阶段时执行， false代表冒泡阶段执行， 
            现代浏览器事件流是： 捕获阶段 --》 事件源 --》冒泡阶段， true和false代表在那个阶段执行事件

         -->

    <!-- 用监听事件来注册事件，以前的方法对元素只能添加一次事件，而用监听事件来写的话对同一元素可以添加多次事件 -->
    <button id="nihao">hello</button>
    <div style="width: 150px;height:50px;text-align: center;background-color: red;line-height: 50px;">hello world</div>
    <script>
        var btn = document.getElementById('nihao');
        btn.addEventListener('click', () => {
                alert('你好');
            })
            //用传统的方法只能添加一次 ，这个可以添加多个
        btn.addEventListener('click', (e) => {
                alert('yes');
                e.stopPropagation(); //阻止事件的冒泡
            })
            //解绑事件（删除事件）不能用匿名函数来实现
        var divs = document.querySelector('div');

        function fn(e) {
            alert('你好');
            e.stopPropagation();
            divs.removeEventListener('click', fn); //放在函数的里面
        }
        divs.addEventListener('click', fn); //这里的函数调用不用写上（）

        //dom事件流，捕获（从上往下）和冒泡（从下往上）
        document.addEventListener('click', () => {
            alert('document');
        })
    </script>
    <div class="duixiang" style="width: 150px;height: 50px;background-color: blue;">
        123
    </div>
    <a href="www.baidu.com">百度</a>
    <script>
        var duixiang = document.querySelector('.duixiang');
        //事件对象
        duixiang.addEventListener('click', function(event) { //可以用e也可以用event、evt来写这个点击事件对象的信息ie6.7.8要用window.event才能得到
                console.log(event);
            })
            //阻止默认事件触发
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //这是个方法，要加上（）
            })
            // 传统的注册方法
        a.onclick = function(e) {
                //普通浏览器
                e.preventDefault();
                //低版本的浏览器
                e.returnValue;
                //也可以用return false来终止，但是return后面的代码将不会执行
                return false;
                alert('11'); //不会执行
            }
            // 阻止事件冒泡e.stopPropagation();
            //在低版本中用e.concelBubble=true;
            // 写在上面
    </script>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <img style="width:20px ;height: 20px;position: absolute;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F15bb4d3d77d77acb3b545b270ca913ca1003d5801d1de-iC0BEb_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656156245&t=44fe7074bddd434a83d3a25456d54229"
        alt="">
    <script>
        //事件委托、不是给每一个子节点添加事件，而是给父节点添加事件，然后用捕获的原理来给每一个子节点添加事件
        var ul = document.querySelector('ul');
        ul.addEventListener('click', (e) => {
            alert('world');
            e.stopPropagation();
            e.target.style.background = 'pink';
            console.log(e); //输出的是整个是事件的情况，返回的是一个对象
        })

        // 获取鼠标的位置：e.clientX,和e.clientY  这两个位置是相对于可视窗口的
        //e.pageX,e.pageY 获取的位置是相对于整个页面的

        //做一个鼠标跟随的案例

        var img = document.querySelector('img');
        document.addEventListener('mousemove', (e) => {

            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x + 'px';
            img.style.top = y + 'px'; //位置是有像素的，要跟上单位

        })

        //键盘事件
        // 1.keyup按键弹起时触发
        //2.keydown按键按下时触发
        //e.keyCode可以返回按下的按键ascall码值，可以用来返回
        document.addEventListener('keyup', function(e) {
                console.log(e.keyCode);
            })
            //以上两种方法按下的a和A是不区分大小写的都是输出A的ascall码值

        //3.keypress按键按下的时候触发,这个方法是不识别功能键的
        // 用e.keyCode这个方法是区分a和A的大小写的
    </script>

    <input type="text">
    <script>
        //做一个按键直接选中
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>

</html>
